<template>
    <div v-if="show">
        <van-tabs v-model:active="active" sticky offset-top="45px">
            <div class="playline">
                <van-icon name="play-circle" color="#DD001B" />
                <span class="playword">播放全部<span class="playnumber"></span></span>
            </div>
            
            <van-tab title="单曲" class="card">
                <div>
                    <div v-for="item,index in resulthreearr.single.arr[0].songs" class="linebox" @click="gosongplay(item.id)" :key="index">
                        <div>
                            <span v-html='item.name'></span>
                            <div class="ar"><span v-for="ele,index in item.ar" v-html="ele.name" :key="index"></span> -
                                <span v-html="item.al.name"></span>
                            </div>
                        </div>
                        <van-icon name="tv-o" class="icon" />
                    </div>

                </div>

            </van-tab>
            <van-tab title="歌单" class="card">
                <div>
                    <div v-for="item,index in  resulthreearr.song_sheet.arr[0].playlists" class="linebox" @click="gosheetdetail(item.id)" :key="index">
                        <div >
                            <img :src="item.coverImgUrl" class="albumimg">
                            <span v-html='item.name'></span>-
                            <span class="ar">{{item.trackCount}}首音乐 by{{item.creator.nickname}}分享</span>
                        </div>
            
                    </div>

                </div>
            </van-tab> 
            <van-tab title="专辑" class="card">
                <div>
                    <div v-for="item,index in  resulthreearr.Album.arr[0].albums" class="linebox" :key="index">
                        <div >
                            <img :src="item.blurPicUrl" class="albumimg">
                            <span v-html='item.name'></span>-
                            <span class="ar"><span v-for="ele,index in item.artists" v-html="ele.name" :key="index"></span>
                            </span>
                        </div>
            
                    </div>

                </div>
            </van-tab>
            <van-tab title="标签 4">内容 4</van-tab>-
        </van-tabs>

    </div>
</template>

<script setup>
import { onMounted, ref, reactive ,watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { searchresult } from '../../api/discovery'
import { useStore } from 'vuex'

const store = useStore()
const router = useRouter()
const route = useRoute()
const active = ref(0);
let show = ref(false)
let keyword = ref()
let resulthreearr = reactive({
    single: {
        name: '单曲', type: 1, arr: [{ searchQcReminder: null, songs:[], songCount: 309 }]
    },
    Album: { name: '专辑', type: 10, arr: [] },
    song_sheet: { name: '歌单', type: 1000, arr: [] },
})
onMounted(() => {
    console.log('keyword', route.query.keyword)
    keyword.value = route.query.keyword
    getresult()
})

const gosongplay = (id) => {
    store.state.nowplay.id = id
    store.state.nowplay.state = 'pause'
    router.push({
        path: '/songplay',
    })
}

const gosheetdetail = (id) => {
    console.log('id', id)
    router.push({
        path: '/sheetdetail',
        query: {
            ids: id
        }
    })

}
watch(()=>{route.query.keyword},()=>{
    console.log('keyword变化')
    keyword.value = route.query.keyword
    getresult()
},{
    deep:true
})
const getresult = async () => {
    show.value = false
    const reg = new RegExp(keyword.value, 'ig')
    for (let item in resulthreearr) {
        resulthreearr[item].arr = []
        let data = await searchresult(route.query.keyword, resulthreearr[item].type)
        resulthreearr[item].arr.push(data.result)
    }
    show.value = true
    console.log('1', resulthreearr.Album.arr[0])
    resulthreearr.single.arr[0].songs.forEach(element => {
        element.name = element.name.replace(reg, '<span style="color: #4EA1CF">' + keyword.value + '<span>')
        element.ar.forEach(item => {
            item.name = item.name.replace(reg, '<span style="color: #4EA1CF">' + keyword.value + '<span>')
        })
    })
    resulthreearr.Album.arr[0].albums.forEach(element => {
        element.name = element.name.replace(reg, '<span style="color: #4EA1CF">' + keyword.value + '<span>')
        element.artists.forEach(item => {
            item.name = item.name.replace(reg, '<span style="color: #4EA1CF">' + keyword.value + '<span>')
        })
    })
 
}
</script>

<style scoped lang="less">
.card {
    background-color: white;
    padding: 0 20px;
}

.tittle {
    font-size: 20spx;
    font-weight: bold;
    border-bottom: 1px solid #EDEDED;
    padding: 10px 0;
}

.linebox {
    padding: 10px;
    border-bottom: 1px solid #EDEDED;
    display: flex;
    align-items: center;
    position: relative;
}

.ar {
    color: #9C9C9C;
    font-size: 14px;
    margin-top: 10px;
}

.icon {
    position: absolute;
    right: 0%;
}

.playline {
    background-color: white;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    position: sticky;
    top: 88px;
    z-index: 999;

    .playword {
        font-weight: bold;
        font-size: 18px;
    }

    .playnumber {
        font-size: 10px;
        color: #AAAAAA;
        margin: 10px;
    }
}

.a {
    position: relative;
}

.albumimg {
    width: 50px;
    border-radius: 10px;
    margin: 0 10px;
}
</style>